<template>
  <div class="app-container">
    <el-card class="home-card">
      <div>
        &emsp;&emsp;
        <!-- <h1>{{name}}</h1> -->
        <h1 v-if="roles == 'admin'">本系统为中药溯源系统,主要功能大致分为以下几个：</h1>
        <h1 v-else>本系统为中药溯源系统体验版,主要功能大致分为以下几个：</h1>
        <hr />
        <br />
        <!-- <font size="5">&emsp;&emsp;xxxxx</font> -->
        <div>
          <font size="3">&emsp;一、资源浏览</font>
          <br />
          <font size="3">&emsp;此界面包含中药材资源浏览的功能，可以快速查看药材相关信息。</font>
          <br />
          <br />
          <font size="3">&emsp;二、资源管理</font>
          <br />
          <font size="3">&emsp;此界面包含原料去向管理、种植公司管理、产地产区管理、价格渠道管理和中药材资源管理的功能。</font>
          <br />
          <br />
          <font size="3">&emsp;三、基本信息管理</font>
          <br />
          <font size="3">&emsp;此界面包含菜单管理、用户管理和角色管理的功能，可以分别对系统菜单、用户及其权限进行管理。</font>
          <br />
          <br />
          <font size="3">&emsp;四、系统管理</font>
          <br />
          <font size="3">&emsp;此界面包含账号管理的功能,可以修改账号的密码。</font>
          <br />
          <br />
          <font size="3">&emsp;五、终端管理</font>
          <br />
          <font size="3">&emsp;此界面包含设备管理和网关管理的功能，可以进入相应的设备界面查看详细的设备数据信息，同时数据还以图表的形式动态地进行显示。</font>
          <br />
        </div>
        <!-- <div v-else>
          <font size="3">&emsp;一、资源浏览</font>
          <br />
          <font size="3">&emsp;此界面包含中药材资源浏览的功能，可以快速查看药材相关信息。</font>
          <br />
          <br />
          <font size="3">&emsp;二、基本信息管理</font>
          <br />
          <font size="3">&emsp;此界面包含用户更改个人信息等功能</font>
          <br />
          <br />
          <font size="3">&emsp;三、终端数据浏览</font>
          <br />
          <font size="3">&emsp;此界面包含设备及数据浏览功能，可以进入相应的设备界面查看详细的设备数据信息，同时数据还以图表的形式动态地进行显示。</font>
          <br />
        </div> -->
      </div>
    </el-card>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  name: "Home",
  computed: {
    ...mapGetters(["name", "roles"])
  }
};
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}

.home-card {
  height: 520px;
}

/* 手机端 */
@media screen and (max-width: 768px) {
  .home-card {
    height: 100%;
  }
}
</style>
